<template>
    <uni-popup ref="servePopupRef" @change="onPopupChange" :safe-area="false">
        <view class="container">
            <view class="main">
                <view class="card" v-if="state.express.length">
                    <view class="title">快递发货</view>
                    <view class="desc">运费：{{ state.express[0] }}</view>
                </view>
                <view class="card" v-if="state.delivery.length">
                    <view class="title">同城配送</view>
                    <view class="desc" v-for="item in state.delivery" :key="item">{{ item }}</view>
                </view>
                <view class="card" v-if="state.pickup.length">
                    <view class="title">上门自提</view>
                    <view class="desc">{{ state.pickup.join('；') }}</view>
                </view>
            </view>
            <view class="footer" :style="{ paddingBottom: safeArea ? 0 : '30rpx' }">
                <view class="btn" @click="onConfirm">我知道了</view>
            </view>
        </view>
    </uni-popup>
</template>

<script setup>
import store from '@/store';
import request from '@/request';
import { isObject } from '@/commons/utils';
import { ref, reactive, watch } from 'vue';

const props = defineProps({
    modelValue: { type: Boolean, default: false },
    params: { type: Object, default: () => ({}) }
});
const emit = defineEmits(['update:modelValue']);

const safeArea = store.useTabBarStore().safeArea;
const servePopupRef = ref(null);
const state = reactive({
    requestSuccess: false,
    express: [], // 快递信息
    delivery: [], // 同城配送的信息
    pickup: [] // 自提信息
});

const getData = async () => {
    if (state.requestSuccess) {
        servePopupRef.value.open('bottom');
        return;
    }
    try {
        const { data } = await request('getGoodsService', props.params);
        state.requestSuccess = true;
        const express = Array.isArray(data.express) ? data.express : [];
        const delivery = Array.isArray(data.delivery) ? data.delivery : [];
        const pickup = Array.isArray(data.pickup) ? data.pickup : [];
        state.express = express;
        state.delivery = delivery;
        state.pickup = pickup;
        if (express.length || delivery.length || pickup.length) {
            servePopupRef.value.open('bottom');
        } else {
            emit('update:modelValue', false);
        }
    } catch (error) {
        emit('update:modelValue', false);
        if (!isObject(error)) return;
        uni.showToast({
            title: error.data.msg,
            icon: 'none',
            duration: 2000
        });
    }
};
const onConfirm = () => {
    emit('update:modelValue', false);
};
// 打开/关闭弹窗
const onPopupChange = e => {
    emit('update:modelValue', e.show);
};
watch(
    () => props.modelValue,
    v => {
        if (v) {
            getData();
        } else {
            servePopupRef.value.close();
        }
    }
);
</script>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 600rpx;
    padding: 34rpx 29rpx 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    border-radius: 22rpx 22rpx 0rpx 0rpx;
    box-sizing: border-box;
    background-color: #fff;
    .card {
        margin-bottom: 21rpx;
    }
    .title {
        margin-bottom: 25rpx;
        font-size: 31rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
    }
    .desc {
        margin-bottom: 17rpx;
        font-size: 25rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 36rpx;
    }
    .footer {
        .btn {
            height: 80rpx;
            margin-top: 100rpx;
            border-radius: 40rpx;
            line-height: 80rpx;
            background: linear-gradient(270deg, #ff5356 0%, #fe292b 100%);
            text-align: center;
            font-size: 29rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
        }
    }
}
</style>
